<template>
  <div class="question-detail-wrapper">
    <div class="question-info-item" style="margin-top: 0">
      <div class="question-header">
        <img class="avatar" :src="question.asker.avatar" alt="" />
        <span class="name">{{ question.asker.nickname }}</span>
        <span class="price">￥{{ question.reward }}</span>
      </div>
      <div class="question-content">
        <div class="question-desc">
          <p class="question-text full-desc">{{ question.text }}</p>
          <image-previewer :images="question.attachments"></image-previewer>
          
          <div class="question-tags">
            <span v-if="question.catalog" class="tag-item">{{ question.catalog.name }}</span>
          </div>
          <span class="ask-time">{{ question.pastTimeStr }}提问</span>
        </div>
      </div>
    </div>
    
    <ul class="answers-wrapper">
      <li v-for="(item, index) in answerData.results" class="answer-item">
        <div class="answer-header">
          <img class="avatar" :src="item.replier.avatar" alt="" />
          <span class="name">{{ item.replier.nickname }} {{ item.replier.title }}</span>
          <span v-if="item.reward" class="price">￥{{ item.reward }}</span>
        </div>
        <div class="answer-bubble">
          <bubble isBought="true" :audioUrl="item.audio" :type="1" :seconds="item.audio_length" :index="index"></bubble>
        </div>

        <div v-if="item.stars" class="answer-check-wrapper">
          <img src="../../assets/icon/icon_check_selected.png" @click="cancelRate(index)" alt="" class="check-icon" />
          <span class="check-desc">{{ item.stars }}星</span>
        </div>
        <div v-else class="answer-check-wrapper">
          <img src="../../assets/icon/icon_check.png" alt="" class="check-icon" />
        </div>
        
        <div class="answer-rate-wrapper">
          <img v-if="item.stars >=1" @click="rate(index, 1)" src="../../assets/icon/icon_star_selected.png" alt="" />
          <img v-else @click="rate(index, 1)" src="../../assets/icon/icon_star.png" alt="" />
          <img v-if="item.stars >=2" @click="rate(index, 2)" src="../../assets/icon/icon_star_selected.png" alt="" />
          <img v-else @click="rate(index, 2)" src="../../assets/icon/icon_star.png" alt="" />
          <img v-if="item.stars >=3" @click="rate(index, 3)" src="../../assets/icon/icon_star_selected.png" alt="" />
          <img v-else @click="rate(index, 3)" src="../../assets/icon/icon_star.png" alt="" />
          <img v-if="item.stars >=4" @click="rate(index, 4)" src="../../assets/icon/icon_star_selected.png" alt="" />
          <img v-else @click="rate(index, 4)" src="../../assets/icon/icon_star.png" alt="" />
          <img v-if="item.stars >=5" @click="rate(index, 5)" src="../../assets/icon/icon_star_selected.png" alt="" />
          <img v-else @click="rate(index, 5)" src="../../assets/icon/icon_star.png" alt="" />
        </div>
        <div class="answer-item-footer">
          <span class="answer-time">{{ item.pastTimeStr }}</span>
          <span class="right-text">听过 {{ item.glance_count }}</span>
        </div>
      </li>
    </ul>
    <div class="footer-wrapper">
      <template v-if="question.process == 2">
        <button class="btn btn-yellow btn-disabled">答案已选择</button>
      </template>
      <template v-else>
        <button v-if="selectedLength < answerData.results.length" class="btn btn-yellow btn-disabled">请给每个答案评分</button>
        <button v-else @click="selectAnswer" class="btn btn-yellow ">提交选择</button>
      </template>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import qs from 'qs'

import Bubble from '@/components/bubble'

import { mapGetters } from 'vuex'

Vue.component(Bubble.name, Bubble)

// 问题详情
export default {
  name: 'MyQuestionDetail',
  data () {
    return {
      id: this.$route.params.id,
      question: { asker: {} },
      answerData: { results: []},
    }
  },
  computed: {
    ...mapGetters([
      'userInfo',
    ]),
    selectedLength: function() {
      var len = 0
      var answers = this.answerData.results
      for (var i=0; i<answers.length; i++) {
        var item = answers[i]
        if (item.stars) {
          len ++
        }
      }
      return len
    }
  },
  created () {
    if (typeof(this.$route.params.question) == 'undefined') {
      this.getQuestion()
    } else {
      this.question = this.$route.params.question
    }
    this.getAnswers()
  },
  methods: {
    rate(index, grade) {
      if (this.question.process == 2) {
        return
      }
      var answer = this.answerData.results[index]
      console.log(answer)
      var params = {
        'stars': grade,
      }
      var url = '/dianping/answer/' + answer.id + '/rate_answer/'
      var that = this
      // 调用登陆接口
      this.axios.post(url, qs.stringify(params))
      .then(function (res) {
        if (res.status >= 200 && res.status < 300) {
          answer.stars = grade
        }
      })
    },
    cancelRate(index) {
      if (this.question.process == 2) {
        return
      }
      var answer = this.answerData.results[index]
      var params = {
        'stars': 0,
      }
      var url = '/dianping/answer/' + answer.id + '/rate_answer/'
      var that = this
      // 调用登陆接口
      this.axios.post(url, qs.stringify(params))
      .then(function (res) {
        if (res.status >= 200 && res.status < 300) {
          answer.stars = 0
        }
      })
    },
    getQuestion() {
      var url = '/dianping/question/' + this.id + '/'
      var that = this
      // 调用登陆接口
      this.axios.get(url)
      .then(function (res) {
        that.$toast.clear()
        if (res.status === 200) {
          that.question = res.data
        }
      })
      .catch(function (error) {
        that.$toast.clear()
        console.log(error)
      })
    },
    getAnswers(next=null) {
      var params = { question: this.id }
      var url = '/dianping/answer/'
      if (next) {
        url = next
      }
      this.$toast.loading()
      var that = this
      // 调用登陆接口
      this.axios.get(url, { params: params })
      .then(function (res) {
        that.$toast.clear()
        console.log(res.data)
        if (res.status === 200) {
          that.answerData.results = res.data.results
          that.answerData.previous = res.data.previous
          that.answerData.next = res.data.next
          that.answerData.count = res.data.count
        }
      })
      .catch(function (error) {
        that.$toast.clear()
        console.log(error)
      })
    },
    selectAnswer() {
      var selectedIds= []
      this.answerData.results.forEach(function(answer) {
        if (answer.stars) {
          selectedIds.push(answer.id)
        }
      })
      var answers = selectedIds.join(',')
      var params = {
        'answers': answers,
      }
      var url = '/dianping/question/' + this.question.id + '/select_answer/'
      var that = this
      // 调用登陆接口
      this.$toast.loading()
      this.axios.post(url, qs.stringify(params))
      .then(function (res) {
        that.$toast.clear()
        if (res.status >= 200 && res.status < 300) {
          that.$toast.success('选中答案成功')
          that.question.process = 2
        }
      })
      .catch(function (error) {
        that.$toast.clear()
        if (error.response) {
          that.$toast.fail(error.response.data.detail)
        } else {
          that.$toast.fail('请求出错')
        }
      })
    }
  }
}

</script>

<style lang="scss" scoped>
  @import '../../assets/style/const.scss';
  .answers-wrapper {
    margin-top: .5rem;
    margin-bottom: 3rem;
  }
  .footer-wrapper {
    width: 100%;
    background: #fff;
    position: fixed;
    bottom: 0;
    padding: .5rem .75rem;
    box-sizing: border-box;
  }

</style>
